<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <style type="text/css">
        .list_con {
            width: 600px;
            margin: 50px auto 0;
        }
        
        .inputtxt {
            width: 550px;
            height: 30px;
            border: 1px solid #ccc;
            padding: 0px;
            text-indent: 10px;
        }
        
        .inputbtn {
            width: 40px;
            height: 32px;
            padding: 0px;
            border: 1px solid #ccc;
        }
        
        .list {
            margin: 0;
            padding: 0;
            list-style: none;
            margin-top: 20px;
        }
        
        .list li {
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #ccc;
        }
        
        .list li span {
            float: left;
        }
        
        .list li a {
            float: right;
            text-decoration: none;
            margin: 0 10px;
        }
    </style>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript">
        window.onload = function() {

            var vm = new Vue({

                el: ".list_con",
                data: {
                    inputContent: "",
                    data_list: ["学习vue入门", "学习html", "学习css", "学习javascript"]
                },
                methods: {
                    fnAdd: function() {
                        // 纯js的代码  和 vue 没啥关系
                    },
                    fnUp: function() {

                    },
                    fnDown: function() {

                    },
                    fnDel: function() {

                    },

                },
            })
        }
    </script>
</head>

<body>


    <div class="list_con">
        <h2>To do list</h2>
        <input v-model="inputContent" type="text" name="" id="txt1" class="inputtxt">
        <input v-on:click="fnAdd" type="button" name="" value="增加" id="btn1" class="inputbtn">

        <ul id="list" class="list">

            <li v-for="item in data_list">
                <span>{{ item }}</span>
                <a v-on:click="fnUp" href=" javascript:; " class="up "> ↑ </a>
                <a v-on:click="fnDown" href="javascript:; " class="down "> ↓ </a>
                <a v-on:click="fnDel" href="javascript:; " class="del ">删除</a>
            </li>

        </ul>

    </div>

</body>

</html>